<template>
  <div class="index">
     <!-- v-model用来获取当前是哪一个频道id。它与van-tab中的name属性一起工作  -->
    <van-tabs v-model="curIndex">
      <van-tab v-for="channel in channels" :key="channel.id" :title="channel.name">
        <!-- 把当前的频道信息(channel)传给子组件 把当前的频道id传递给子组件 -->
        <!-- 文章列表 -->
        <!--showMoreAction 接收来自 aritcleList中传递过来的用户id  (用户点击了关闭按钮) -->
        <article-list :channel = "channel" @showMoreAction="hShowMoreAction"></article-list>
      </van-tab>
    </van-tabs>
    <!-- 文章---更多操作 -->
       <!-- 频道列表 开关 通过定位 -->
    <div class="bar-btn" @click="isShowChannelEdit=true" v-if="$store.getters.isLogin">
        <van-icon name="wap-nav"/>
    </div>
    <!-- <弹层>更多操作组件</弹层> -->
    <!--
      isSHowMoreAction 为 true 时  显示弹层
     -->
    <van-popup v-model="isSHowMoreAction" :style="{ width: '80%' }">
     <!-- hDislike // 处理用户在弹层中选择的 不感兴趣 -->
     <!-- \
      由moreAction抛出dislike事件
      -->
       <more-action ref="refMoreAction"  @dislike="hDislike" @report="hReport"></more-action>
    </van-popup>
     <van-action-sheet v-model="isShowChannelEdit" title="标题">
       <!--  1. 父传子。把当前订阅频道传给 频道编辑组件 -->
      <channel-Edit
       :channels="channels"
      @updateCurChannel="hUpdateCurChannel"
      @updataCurrentIndex="hupdataCurrentIndex"
       :curIndex="curIndex"></channel-Edit>
    </van-action-sheet>
  </div>
</template>

<script>
import { report, disLike } from '@/api/article.js'
import { getChannels } from '@/api/channel.js'
import ArticleList from './aritcleList'
import MoreAction from './moreAction'
import ChannelEdit from './channelEdit'
export default {
  name: 'Home',
  components: {
    // 文章列表
    ArticleList,
    // 更多操作
    MoreAction,
    ChannelEdit
  },
  data () {
    return {
      // 在父组件index.vue组件中，保存子组件articleLise中抛出的：关闭按钮种 要传递的id
      // 本次要操作的文章编号
      articleId: null,
      // 是否显示更多操作的弹层
      isSHowMoreAction: false,
      // 表示当前选择中频道的序号
      curIndex: '',
      channels: [],
      // 是否显示频道编辑弹层
      isShowChannelEdit: false
    }
  },
  created () {
    this.loadChannel()
  },
  // 补充一个计算属性，来获取当前用户选中的频道id
  computed: {
    cChannelId () {
      // 获取当前用户选中的频道的id
      return this.channels[this.curIndex].id
    }
  },
  methods: {
    // 更新
    hupdataCurrentIndex (idx) {
      this.curIndex = idx
    },
    // 处理子组件channelEdit中用户在我的频道上点击的动作
    hUpdateCurChannel (idx) {
      console.log('响应 频道管理子组件', idx)
      // 1. 切换 频道
      this.curIndex = idx
      // 2. 关闭弹层
      this.isShowChannelEdit = false
    },
    // 处理用户在弹层中选择的，举报文章
    async hReport (typeId) {
      console.log('举报')
      console.log('父组件收到举报的类型是', typeId)
      const result = await report(this.articleId, typeId)
      console.log(result)
      // 2.关闭弹层
      this.isSHowMoreAction = false
      // 3.通知文章列表去删除这个文章
      //  eventBus传参数
      this.$eventBus.$emit('delArticle', {
        articleId: this.articleId,
        channelId: this.cChannelId
      })
    },
    // 处理用户在弹层中选择的 不感兴趣
    async hDislike () {
      console.log('用户点击了， 不感兴趣,当前要操作的文章编号是：', this.articleId)
      // 1.调用接口
      const res = await disLike(this.articleId)
      console.log(res)
      // 2.关闭弹层
      this.isSHowMoreAction = false
      // 3.点击文章的删除
      // $emit是事件总线(Vue实例)提供的方法 ，用来发布事件。格式：`$emit('事件名', 参数)
      this.$eventBus.$emit('delArticle', {
        // 频道id
        articleId: this.articleId,
        // 文章id
        channelId: this.cChannelId
      })
    },
    // 响应子组件articleList中的关闭按钮
    hShowMoreAction (articleID) {
      // 1. 保存articleID
      this.articleId = articleID
      console.log('这是id', articleID)
      // 2. 弹层
      this.isSHowMoreAction = true
      // 3. 重置moreAction.vue中的isReport
      // this.$refs.refMoreAction 找到子组件
      // 在页面打开时，弹层并没有显示，此时，moreAction组件并没有创建出来
      if (this.$refs.refMoreAction) {
        this.$refs.refMoreAction.isReport = false
      }
    },
    async loadChannel () {
      const res = await getChannels()
      console.log(res)
      this.channels = res.data.data.channels
    }
  }
}
</script>
<style scoped lang='less'>
  // 频道管理的开关按钮
  .bar-btn {
    position: fixed;
    right: 5px;
    top: 57px;
    display: flex;
    align-items: center;
    background-color: #fff;
    opacity: 0.8;
    z-index:1;
    .van-icon-wap-nav{
      font-size: 20px;
    }
  }
</style>
